<template>
    <div class="data-display">
      <h2>数据展示</h2>
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>内存使用趋势图</span>
              </div>
            </template>
            <div id="memory-chart" class="chart"></div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>操作频率统计图</span>
              </div>
            </template>
            <div id="operations-chart" class="chart"></div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
          <el-card>
            <template #header>
              <div class="card-header">
                <span>最近的备份记录</span>
              </div>
            </template>
            <el-table :data="backups" style="width: 100%">
              <el-table-column prop="time" label="时间" width="180"></el-table-column>
              <el-table-column prop="size" label="大小" width="180"></el-table-column>
              <el-table-column prop="status" label="状态" width="180"></el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref ,onMounted} from 'vue';
  import * as echarts from 'echarts';
  
  const backups = ref([
    { time: '2023-08-26 10:00:00', size: '123.45 MB', status: 'Success' },
    { time: '2023-08-25 10:00:00', size: '110.25 MB', status: 'Success' },
    { time: '2023-08-24 10:00:00', size: '102.34 MB', status: 'Failed' },
  ]);
  
  const initCharts = () => {
    const memoryChart = echarts.init(document.getElementById('memory-chart'));
    const options = {
      xAxis: {
        data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
      },
      series: [
        {
          type: 'line',
          data: [120, 132, 101, 134, 90, 230, 210],
        },
      ],
    };
    memoryChart.setOption(options);
  
    const operationsChart = echarts.init(document.getElementById('operations-chart'));
    const operationOptions = {
      xAxis: {
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      series: [
        {
          type: 'bar',
          data: [120, 132, 101, 134, 90, 230, 210],
        },
      ],
    };
    operationsChart.setOption(operationOptions);
  };
  
  onMounted(() => {
    initCharts();
  });
  </script>
  
  <style scoped>
  .data-display {
    padding: 20px;
  }
  
  .chart {
    height: 200px;
  }
  </style>